<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>左侧导航栏</title>
    <style>
      .modal {
        display: none; /* 隐藏弹窗 */
        position: fixed; /* 固定位置 */
        z-index: 1; /* 在最上层 */
        left: 0;
        top: 0;
        width: 100%; /* 全屏 */
        height: 100%; /* 全屏
			*/
        overflow: auto; /* 如果需要，添加滚动条 */
        background-color: rgb(0, 0, 0); /* 背景颜色
			*/
        background-color: rgba(0, 0, 0, 0.4); /* 背景透明度 */
      }
      .modal-content {
        background-color: #fefefe;
        margin: 15% auto; /* 15% 从顶部，居中 */
        padding: 20px;
        border: 1px solid #888;
        width: 50%; /* 宽度 */
      }
      .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
      }
      .close:hover,
      .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
      }
      .nav {
        display: flex;
        align-items: center;
        padding: 8px 16px;
        background-color: #fff;
        border-bottom: 1px solid #eee;
      }
      .nav-left {
        display: flex;
        align-items: center;
        gap: 16px;
        flex: 1;
      }
      .nav-right {
        display: flex;
        align-items: center;
        gap: 16px;
      }
      .pending-order {
        display: flex;
        align-items: center;
        gap: 4px;
        color: #333;
        text-decoration: none;
      }
      .blue-dot {
        width: 6px;
        height: 6px;
        background-color: #5048e5;
        border-radius: 50%;
      }
      .nav-link {
        color: #666;
        text-decoration: none;
        font-size: 14px;
      }
      .nav-link:hover {
        /* color: #1677ff; */
      }
      .free-test {
        color: #ff4d4f;
        text-decoration: none;
        font-size: 14px;
      }
      .free-test:hover {
        color: #ff7875;
      }
      .member-tag {
        color: #ff9f00;
        font-size: 14px;
      }
      .recharge-btn {
        background-color: #5048e5;
        color: white;
        padding: 4px 12px;
        border-radius: 4px;
        text-decoration: none;
        font-size: 14px;
      }
      .user-avatar {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: #eee;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .user-id {
        color: #666;
        font-size: 14px;
        text-decoration: none;
      }
      .sidebar {
        width: 240px;
        background-color: #fff;
        height: 100vh;
        border-right: 1px solid #eee;
        flex-shrink: 0;
        font-size: 18px;
      }
      .nav-list {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      .nav-item {
        margin: 4px 0;
      }
      .nav-link {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        text-decoration: none;
        color: #333;
        font-size: 18px;
      }
      .icon {
        margin-right: 8px;
      }
      .arrow {
        margin-left: auto;
        font-size: 16px;
      }
      .sub-menu {
        list-style: none;
        padding: 0;
        margin: 0;
        display: none;
        background: linear-gradient(to right, #eef0fd, #ece8fe);
      }
      .sub-menu.active {
        display: block;
      }
      .sub-menu li a {
        padding: 10px 16px 10px 40px;
        display: block;
        text-decoration: none;
        color: #666;
        font-size: 18px;
      }
      .nav-link:hover,
      .sub-menu li a:hover {
        background-color: #f6f7ff;
      } /* 布局样式 */
      .layout {
        display: flex;
        height: 100vh;
        overflow: hidden;
      }
      .sidebar {
        width: 240px;
        background: linear-gradient(to right, #eef0fd, #ece8fe);
        border-right: 1px solid #eee;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        overflow-y: auto;
        z-index: 1000;
      }
      .page-content {
        flex: 1;
        margin-left: 240px;
        min-height: 100vh;
        position: relative;
        overflow-x: hidden;
      } /* 视频合成页面的内容区域 */
      .container {
        padding: 20px;
        min-height: 100vh;
        box-sizing: border-box;
      } /* 素材库布局 */
      .material-container {
        display: flex;
        gap: 20px;
        min-height: calc(100vh - 150px);
        box-sizing: border-box;
      } /*
			右侧内容区域 */
      .main-content-index {
        flex: 1;
        height: 100vh;
        overflow: hidden;
        padding: 0;
        margin-left: 240px;
      } /* 视频网格样式 */
      .video-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
        padding: 0 20px 20px 0;
      } /* 左侧素材边栏样式 */
      .material-sidebar {
        width: 260px;
        background: #f5f5f5;
        padding: 20px;
        border-radius: 8px;
        height: fit-content;
        position: sticky;
        top: 0;
        margin-left: -240px;
      } /* 全局字体大小设置 */
      body {
        font-size: 30px;
      } /* 标题字体大小 */
      .title {
        font-size: 40px;
      } /* 按钮文字大小 */
      .button {
        font-size: 25px;
      } /* 表格文字大小 */
      table {
        font-size: 25px;
      } /*
			输入框文字大小 */
      input,
      select,
      textarea {
        font-size: 25px;
      } /* 链接文字大小 */
      a {
        font-size: 23px;
      }
    </style>
    <script src="qrc:///qtwebchannel/qwebchannel.js"></script>
  </head>
  <body>
    <div class="layout">
      <!-- 左侧导航栏 -->
      <nav class="sidebar">
        <ul class="nav-list">
          <li class="nav-item">
            <a href="#" class="nav-link">
              <span class="icon"> 📹 </span>
              视频创作
              <span class="arrow"> ▶ </span>
            </a>
            <ul class="sub-menu">
              <li>
                <a
                  href="pages/video-synthesis/video-synthesis.html"
                  target="iframe"
                >
                  视频合成
                </a>
              </li>
              <li>
                <a
                  href="pages/script-management/script-management.html"
                  target="iframe"
                >
                  脚本管理
                </a>
              </li>
              <li>
                <a
                  href="pages/batch-audio-subtitle/batch-audio-subtitle.html"
                  target="iframe"
                >
                  批量配音、字幕
                </a>
              </li>
            </ul>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">
              <span class="icon"> ☁️ </span>
              AI剪辑
              <span class="arrow"> ▶ </span>
            </a>
            <ul class="sub-menu">
              <li>
                <a href="pages/ai-film/ai-film.html" target="iframe">
                  AI成片
                </a>
              </li>
              <!-- <li><a href="#">选项2</a></li> -->
            </ul>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">
              <span class="icon"> ☁️ </span>
              AI应用
              <span class="arrow"> ▶ </span>
            </a>
            <ul class="sub-menu">
              <li>
                <a href="pages/ai-chat/ai-chat.html" target="iframe">
                  AI对话
                </a>
              </li>
              <!-- <li><a href="#">选项2</a></li> -->
            </ul>
          </li>
          <li class="nav-item">
            <a
              href="pages/hot-topics/hot-topics.html"
              target="iframe"
              class="nav-link"
            >
              <span class="icon"> 🔥 </span>
              热点选题榜
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">
              <span class="icon"> ☁️ </span>
              文案创作
              <span class="arrow"> ▶ </span>
            </a>
            <ul class="sub-menu">
              <li>
                <a
                  href="pages/title-generator/title-generator.html"
                  target="iframe"
                >
                  标题生成
                </a>
              </li>
              <li>
                <a
                  href="pages/content-generator/content-generator.html"
                  target="iframe"
                >
                  文案生成
                </a>
              </li>
              <li>
                <a
                  href="pages/content-rewrite/content-rewrite.html"
                  target="iframe"
                >
                  文案重写
                </a>
              </li>
              <!-- <li><a href="#">选项2</a></li> -->
            </ul>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">
              <span class="icon"> ☁️ </span>
              文案提取
              <span class="arrow"> ▶ </span>
            </a>
            <ul class="sub-menu">
              <li>
                <a
                  href="pages/batch-extract/batch-extract.html"
                  target="iframe"
                >
                  音/视频批量提取
                </a>
              </li>
            </ul>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">
              <span class="icon"> ☁️ </span>
              素材预处理
              <span class="arrow"> ▶ </span>
            </a>
            <ul class="sub-menu">
              <li>
                <a
                  href="pages/video-deduplication/video-deduplication.html"
                  target="iframe"
                >
                  视频去重
                </a>
              </li>
              <li>
                <a
                  href="pages/smart-framing/smart-framing.html"
                  target="iframe"
                >
                  智能分镜
                </a>
              </li>
              <li>
                <a
                  href="pages/audio-video-separation/audio-video-separation.html"
                  target="iframe"
                >
                  音视频分离
                </a>
              </li>
              <li>
                <a
                  href="pages/video-cropping/video-cropping.html"
                  target="iframe"
                >
                  视频剪裁
                </a>
              </li>
              <li>
                <a
                  href="pages/audio-track-merge/audio-track-merge.html"
                  target="iframe"
                >
                  音轨合并
                </a>
              </li>
              <li>
                <a
                  href="pages/remove-subtitles/remove-subtitles.html"
                  target="iframe"
                >
                  去除字幕
                </a>
              </li>
            </ul>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">
              <span class="icon"> ☁️ </span>
              运营
              <span class="arrow"> ▶ </span>
            </a>
            <ul class="sub-menu">
              <li>
                <a
                  href="pages/forbidden-word-review/forbidden-word-review.html"
                  target="iframe"
                >
                  违禁词审核
                </a>
              </li>
            </ul>
          </li>
          <li class="nav-item">
            <a
              href="pages/distribution-promotion/distribution-promotion.html"
              target="iframe"
              class="nav-link"
            >
              分销推广
            </a>
          </li>
          <li class="nav-item">
            <a
              href="pages/import-font/import-font.html"
              target="iframe"
              class="nav-link"
            >
              全局设置
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">
              <span class="icon"> ☁️ </span>
              帮助
              <span class="arrow"> ▶ </span>
            </a>
            <ul class="sub-menu">
              <li>
                <a href="" target="iframe"> 视频教程 </a>
              </li>
              <li>
                <a href="" target="iframe"> 产品说明 </a>
              </li>
              <li>
                <a href="" target="iframe"> 问题反馈 </a>
              </li>
              <li>
                <a href="#" id="about-link" class="nav-link"> 关于 </a>
              </li>
              <li>
                <a href="#" id="update-link" class="nav-link"> 检查更新 </a>
              </li>
            </ul>
          </li>
          <!-- 更多菜单项... -->
        </ul>
      </nav>
      <!-- 右侧内容区域 -->
      <main class="main-content-index" id="mainContent">
        <!-- 顶部个人信息 -->
        <nav class="nav">
          <div class="nav-left">
            <a href="#" class="pending-order">
              <span class="blue-dot"> </span>
              待支付订单
            </a>
            <a href="#" class="nav-link"> 即将过期优惠券 </a>
            <a href="#" class="nav-link"> 新手入门 </a>
            <a href="#" class="free-test"> 免费试刷测试 </a>
          </div>
          <div class="nav-right">
            <span class="member-tag"> 体验会员(长期) </span>
            <a href="#" class="recharge-btn"> 会员充值 </a>
            <a href="#" class="user-id"> 用户543762 </a>
          </div>
        </nav>
        <!-- 这里是默认内容 -->
        <iframe
          name="iframe"
          src="pages/video-synthesis/video-synthesis.html"
          style="width: 100%; height: calc(100vh - 20px); border: none"
          frameborder="0"
        >
        </iframe>
      </main>
    </div>
    <div
      id="about-modal"
      class="modal"
      style="display: none; z-index: 999999; margin-left: 180px"
    >
      <div class="modal-content">
        <span class="close" id="close-about"> &times; </span>
        <h2>关于</h2>
        <p>这是关于弹窗的内容...</p>
      </div>
    </div>
    <div
      id="update-modal"
      class="modal"
      style="display: none; z-index: 999999; margin-left: 180px"
    >
      <div class="modal-content">
        <span class="close" id="close-update"> &times; </span>
        <h2>检查更新</h2>
        <p>这是检查更新弹窗的内容...</p>
      </div>
    </div>
    <script>
      document.querySelectorAll(".nav-link").forEach((link) => {
        link.addEventListener("click", (e) => {
          const subMenu = link.nextElementSibling;
          if (subMenu && subMenu.classList.contains("sub-menu")) {
            e.preventDefault();
            subMenu.classList.toggle("active");
            const arrow = link.querySelector(".arrow");
            if (arrow) {
              arrow.textContent = subMenu.classList.contains("active")
                ? "▼"
                : "▶";
            }
          }
        });
      });

      document.addEventListener("DOMContentLoaded", function () {
        new QWebChannel(qt.webChannelTransport, function (channel) {
          window.bridge = channel.objects.bridge;
        });

        // 获取弹窗
        var aboutModal = document.getElementById("about-modal");
        var updateModal = document.getElementById("update-modal");

        // 获取链接和关闭按钮
        var aboutLink = document.getElementById("about-link");
        var updateLink = document.getElementById("update-link");
        var closeAbout = document.getElementById("close-about");
        var closeUpdate = document.getElementById("close-update");

        // 当用户点击关于链接时，显示关于弹窗
        aboutLink.onclick = function () {
          aboutModal.style.display = "block";
        };

        // 当用户点击检查更新链接时，显示检查更新弹窗
        updateLink.onclick = function () {
          updateModal.style.display = "block";
        };

        // 当用户点击关闭按钮时，隐藏弹窗
        closeAbout.onclick = function () {
          aboutModal.style.display = "none";
        };

        closeUpdate.onclick = function () {
          updateModal.style.display = "none";
        };

        // 当用户点击弹窗外部时，隐藏弹窗
        window.onclick = function (event) {
          if (event.target == aboutModal) {
            aboutModal.style.display = "none";
          }
          if (event.target == updateModal) {
            updateModal.style.display = "none";
          }
        };
      });
    </script>
  </body>
</html>
